<template>
  <view class="container">
    <!-- 搜索栏 -->
    <view class="search-bar">
      <input
        v-model="keyword"
        placeholder="请输入批次名称关键词搜索"
        @input="filterList"
      />
      <button @click="filterList">搜索</button>
    </view>

    <!-- 列表 -->
    <view class="list">
      <view class="item" v-for="(item, index) in filteredList" :key="index">
        <text class="title">{{ item.name }}</text>
        <text>开始时间：{{ item.start }}</text>
        <text>结束时间：{{ item.end }}</text>
        <text>批次时长：{{ item.duration }}</text>
		<navigator url="/pages/demo1/demo1">开始填写</navigator>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'

const keyword = ref('')
const rawList = ref([
  {
    name: '2024年辅导员信息采集',
    start: '2024.11.16 00:00:00',
    end: '2024.11.17 00:00:00',
    duration: '7天'
  }
])

const filteredList = computed(() =>
  rawList.value.filter(item =>
    item.name.includes(keyword.value.trim())
  )
)

function goFill() {
  uni.navigateTo({ url: '/pages/fill/index' })
}
</script>

<style scoped>
.container { padding: 20rpx; }
.search-bar { display: flex; gap: 10rpx; margin-bottom: 20rpx; }
.list .item { border: 1px solid #ccc; padding: 20rpx; margin-bottom: 20rpx; }
.title { font-weight: bold; margin-bottom: 10rpx; display: block; }
</style>修改一下使点击开始填写按钮后跳转到../demo1.vue